<template lang="pug">
.cp-learner-list
  el-dialog.lea-dialog(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    width="80%")
    el-row(:gutter="16")
      el-col(:span="12")
        //- 查询
        el-form.lea-search(:inline="true")
          el-form-item
            el-input(
              v-model="keyWord",
              placeholder="人名/部门/职能"
              style="width: 120px")
          el-form-item(label="起止时间 :")
            el-date-picker.date-width(
              v-model="dateRange",
              type="daterange",
              unlink-panels,
              start-placeholder="开始日期",
              end-placeholder="结束日期",
              value-format="timestamp",
              :default-time="['00:00:00', '23:59:59']")
          el-form-item(label="学习状态 : ")
            el-select(v-model="learnStatus", style="width: 80px")
              el-option(label="全部", :value="null")
              el-option(
                v-for="(item, index) in learnStatusSelect",
                :key="index", :label="item.name",
                :value="item.value")
          el-form-item
            el-button(type="primary", @click="searchStaff") 搜索
        //- 列表
        .lea-table
          el-table(
            :data="staffList",
            highlight-current-row
            height="398px"
            size="mini"
            border
            v-loading="loadingTable")
            el-table-column(show-overflow-tooltip, type="index", label="序号")
            el-table-column(show-overflow-tooltip, prop="name", label="名字")
            el-table-column(show-overflow-tooltip, prop="post", label="职位")
            el-table-column(show-overflow-tooltip, prop="department", label="部门")
            el-table-column(show-overflow-tooltip, prop="function", label="职能")
            el-table-column(label="操作")
              template(slot-scope="scope")
                //- i.icon-act.el-icon-plus(@click="addInbItem(scope.$index, scope.row)")
                el-dropdown
                  i.icon-act.el-icon-plus
                  el-dropdown-menu(slot="dropdown", class="inv-act-drop")
                    el-dropdown-item.act-item(@click.native="addToList(scope.row, true)")
                      //- i.icon-act.el-icon-hy-submit-o
                      span 添加到必学
                    el-dropdown-item.act-item(@click.native="addToList(scope.row, false)")
                      //- i.icon-act.el-icon-hy-back
                      span 添加到可选
        //- 分页
        el-pagination.lea-pagination(
          layout="total, prev, pager, next, jumper",
          @current-change="changePage",
          :current-page.sync="pageNum",
          :page-size="pageSize",
          :background="true",
          :total="staffListTotal")
      el-col(:span="12")
        .table-title 必学人员
        el-table.lea-table(:data="mustList", height="206px", border)
          el-table-column(show-overflow-tooltip, type="index", label="序号")
          el-table-column(show-overflow-tooltip, prop="name", label="名字")
          el-table-column(show-overflow-tooltip, prop="post", label="职位")
          el-table-column(show-overflow-tooltip, prop="department", label="部门")
          el-table-column(show-overflow-tooltip, prop="function", label="职能")
          el-table-column(label="操作")
            template(slot-scope="scope")
              i.icon-act.el-icon-delete(@click="deleteListItem(scope.$index, true)")
        .table-title 可选人员
        el-table.lea-table(:data="optionalList", height="206px", border)
          el-table-column(show-overflow-tooltip, type="index", label="序号")
          el-table-column(show-overflow-tooltip, prop="name", label="名字")
          el-table-column(show-overflow-tooltip, prop="post", label="职位")
          el-table-column(show-overflow-tooltip, prop="department", label="部门")
          el-table-column(show-overflow-tooltip, prop="function", label="职能")
          el-table-column(label="操作")
            template(slot-scope="scope")
              i.icon-act.el-icon-delete(@click="deleteListItem(scope.$index, false)")
    div(slot="footer", style="text-align: center;")
      el-button(type="primary", plain, @click="closeDialog", v-text="'取消'")
      el-button(type="primary", style="margin-left: 40px;", @click="emitData", v-text="'确定'")
</template>

<script>
import { mapGetters } from 'vuex';
import MockData from '@/data/train/trainManage';

export default {
  name: 'learnerlist',
  props: {
    title: {
      type: String,
      default: '选择参与人员'
    },
    visible: Boolean,
    storehouse: {
      type: String
    },
    siteSelect: {
      type: Array
    }
  },
  data() {
    return {
      keyWord: null,
      dateRange: [],
      learnStatus: null,
      // 列表
      staffList: [],
      staffListTotal: 1,
      pageNum: 1,
      pageSize: 10,
      loadingTable: true,
      // 必学人员
      mustList: [],
      // 可选
      optionalList: [],
      // 搜索条件选项
      learnStatusSelect: [{ name: '未学', value: '0' }, { name: '已学', value: '1' }]
    };
  },
  computed: {
    ...mapGetters({})
  },
  watch: {
    storehouse (newData, oldData) {
      if (newData !== oldData) {
        this.loadingList();
      }
    }
  },
  methods: {
    closeDialog () {
      this.$emit('close');
    },
    // 整理参数
    filterParams () {
      const params = {
        keyWord: this.keyWord,
        learnStatus: this.learnStatus
      };
      if (this.dateRange && this.dateRange[0]) {
        params.startTime = this.dateRange[0];
        params.endTime = this.dateRange[1];
      }
      for (const key in params) {
        if (params[key] === null || params[key] === '' || params[key] === undefined) {
          delete params[key];
        }
      }
      return params;
    },
    // 获取列表数据
    loadingList () {
      // const params = this.filterParams();
      this.loadingTable = true;
      setTimeout(() => {
        this.staffList = MockData.staffList;
        this.staffListTotal = 70;
        this.loadingTable = false;
      }, 500);
      /* ManApi.getMaterielOutList(params).then((result) => {
        this.staffList = result.records;
        this.staffListTotal = result.totalNum;
        this.loadingTable = false;
      }).catch((error) => {
        this.loadingTable = false;
        console.log(JSON.stringify(error));
      }); */
    },
    // 搜索
    searchStaff () {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadingList();
    },
    // 分页
    changePage (pageNum) {
      this.pageNum = pageNum;
      this.loadingList();
    },
    // 添加到列表
    addToList (row, flag) {
      if (flag) {
        this.mustList.push(row);
      } else {
        this.optionalList.push(row);
      }
    },
    // 列表中删除
    deleteListItem (index, flag) {
      if (flag) {
        this.mustList.splice(index, 1);
      } else {
        this.optionalList.splice(index, 1);
      }
    },
    // 确定选择
    emitData () {
      if (!this.mustList.length && !this.optionalList.length) {
        this.$message({ type: 'info', message: '请选择' });
      } else {
        this.$emit('submit', this.mustList, this.optionalList);
      }
    }
  },
  mounted () {
    // 获取列表数据
    this.loadingList();
  }
};
</script>

<style lang="sass">
$COLOR: #5D9BFB
.cp-learner-list
  .el-table
    th, td
      text-align: center
  .lea-dialog
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 0 16px 12px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .lea-search
    padding: 12px 0 0 0
    .date-width
      width: 260px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      margin-left: 6px
      padding-right: 6px
    .el-date-editor .el-range__close-icon
      width: 20px
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label
      height: 32px
  .table-title
    color: $COLOR
    line-height: 20px
    margin: 10px 0
  .lea-table
    margin-bottom: 12px
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        font-weight: 500
        padding: 4px
        cursor: pointer
        &:hover
          color: $COLOR
      th.gutter
        display: table-cell!important
  .lea-pagination
    text-align: center
  .inv-act-drop
    .icon-act
      font-size: 16px
      font-weight: 500
      cursor: pointer
      margin-left: -3px
      margin-right: 6px
</style>
